<template>
  <div id="leftMenuExpanded">
    <context-menu
      :show="this.orgMenu.contextMenuVisible"
      :offset="this.orgMenu.contextMenuOffset"
      @update:show="show => (this.orgMenu.contextMenuVisible = show)">
      <div @click="addSession">add session</div>
      <div @click="orgSettings">org settings</div>
    </context-menu>

    <el-menu
      @open="handleOpen">
      <el-menu-item-group>
        <template slot="title">
          <span>orgs</span>
          <span id="newOrg" @click="newOrg">
            <i class="el-icon-plus"/>
          </span>
        </template>
        <el-submenu v-for="org in orgs" :index="org._id">
          <template slot="title">
            <div @contextmenu="showOrgMenu($event,org._id)">
              <i class="el-icon-folder"/>
              {{org.name}}
            </div>
          </template>
          <div v-for="session in sessions[org._id]" :index="session._id">
            <el-menu-item @click="openTab('ssh',session)">
              <i class="el-icon-monitor"/>
              {{session.sessionName}}
            </el-menu-item>
          </div>
        </el-submenu>
      </el-menu-item-group>
    </el-menu>
  </div>
  <!-- <div class="col" id="leftMenuExpanded">
     <div class="header">
       ORGANIZATIONS &nbsp;
       <span v-on:click="newOrg()">
         <i class="fa fa-plus fa-lg" title="Add New Organization"></i>
       </span>
     </div>
     <div class="select">
       <select v-on:change="changeOrg" class="orgSelect" name="selectedOrg" v-model="selected">
         <option value="" selected="selected">Select Organization</option>
         <option v-for="org in orgs" :value="org._id" :key="org._id">{{ org.name }}</option>
       </select>
     </div>

     <div id="orgDetails" class="details" v-if="orgDetails">
       <div id="orgMenu">
         <button v-on:click="orgSettings" class="btn btn-sm btn-default">
           <i class="fa fa-cog"></i>
           Configure Org
         </button>
         <button v-on:click="addSession" class="btn bnt-sm btn-default">
           <i class="fa fa-plus"></i>
           Add Session
         </button>
       </div>
       <span v-if="sessionRegionCount > 0">
         <div class="sessionContent">
           <div v-on:click="openTab('ssh', session)" v-for="session in sessions"
                v-bind:key="session._id">
             <i class="fa fa-cloud"></i>
             {{session.sessionName}}
           </div>
         </div>
       </span>
     </div>
   </div>-->
</template>
<script>
  import _ from 'lodash';
  import {ipcRenderer} from 'electron';

  export default {
    name: 'orgMenu',
    data: function () {
      return {
        sessions: {},
        orgs: [],
        test: [],
        selected: '',
        orgDetails: false,
        sessionRegionCount: 0,
        orgMenu: {
          orgId: {},
          contextMenuVisible: false,
          contextMenuOffset: {
            left: 0,
            top: 0
          }
        }
      };
    },
    mounted: function () {
      ipcRenderer.on('orgmenu.updateSelectBox', this.updateOrgs);
      // ipcRenderer.on('orgmenu.updateSelectedOrg', this.changeOrg);
    },
    methods: {
      showOrgMenu(e, orgId) {
        e.preventDefault();
        this.orgMenu.orgId = orgId;
        this.orgMenu.contextMenuVisible = true;
        this.orgMenu.contextMenuOffset = {
          left: e.pageX,
          top: e.pageY
        };
      },
      handleOpen: async function (key) {
        if (key) {
          var org = await this.$db.orgs.cfindOne({_id: key}).exec();
          console.log(org._id);
          if (org) {
            var tempSessions = await this.$db.sessions.cfind({org: org._id}).exec();
            this.$set(this.sessions, key, tempSessions);
          }
        }
      },
      newOrg: function () {
        ipcRenderer.send('alertbox.show', {type: 'newOrg'});
      },
      openTab: function (type, session) {
        console.log('session:' + JSON.stringify(session));
        const data = {};
        if (type === 'ssh') {
          data.type = 'ssh';
          data.org = session.org;
          data.session = session;
          ipcRenderer.send('mainview.openTab', data);
        }
      },
      addSession: function () {
        const data = {};
        data.org = this.orgMenu.orgId;
        data.type = 'addSession';
        console.log('orgId:' + data.org);
        ipcRenderer.send('alertbox.show', data);
      },
      orgSettings: function () {
        const data = {};
        data.org = this.orgMenu.orgId;
        data.type = 'orgSettings';
        ipcRenderer.send('mainview.openTab', data);
      },
      updateOrgs: async function () {
        try {
          const docs = await this.$db.orgs.cfind().sort({name: 1}).exec();
          if (docs.length > 0) {
            this.orgs = [];
            _.each(docs, (org) => {
              if (org) {
                const minimal = {
                  _id: org._id,
                  name: org.name
                };
                this.orgs.push(minimal);
              }
            });
          }
        } catch (err) {
          console.log(err);
        }
      }
    }
  };
</script>


<style>
  @import '../assets/css/orgmenu.css';
</style>
